<template>
  <div class="title-container">
    <header class="page-header">
      <h1>教育资源中心</h1>
    </header>
  </div>
  <div class="content-container">
    <iframe
      src="http://localhost/knowledge"
      frameborder="0"
      class="full-iframe"
      allow="fullscreen"
    />
  </div>
</template>

<style scoped>
.title-container {
  position: fixed;
  /* 容器充满视口 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 400vh;
  display: flex;
  flex-direction: column;
}

.page-header {
  background: #2c3e50; /* 深蓝背景 */
  color: white;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
  position: relative;
  z-index: 100;
  font-size: x-large;
}

.content-container {
  position: fixed;
  /* 容器充满视口 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* 启用弹性布局 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: flex-end;   /* 垂直靠下 */
}

.full-iframe {
  width: 90%;
  height: 80%;
  
  /* 新增：微调底部间距 */
  margin-bottom: 20px;  /* 可根据需要调整数值 */
  
  /* 可选：添加过渡动画 */
  transition: all 0.3s ease;
}

/* 可选：添加悬停效果 */
.full-iframe:hover {
  transform: scale(1.006);
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
</style>